<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120" style="margin-top: 15px">
      <Row class="query-form">
        <Col span="8">
          <FormItem label='二级集团：' prop='belongOrgId'>
            <Select class='w' placeholder="二级集团" v-model='dataToQuery.belongOrgId'>
              <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='检查时间：' prop='checkTime'>
            <DatePicker :value="dataToQuery.checkTime" type="daterange" @on-change="changeCheckTime"
                        placeholder="选择日期" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <!--          <Button @click="switchQuery(true,88)" class="ivu-btn-switch" type="text">展开∨</Button>-->
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>

    </Form>
    <Row :gutter="7">
      <Col span=6>
        <Card class="statistics-card" id="statistics-card-1">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>两年内问题总数</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ totalMap.totalNum }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>未闭环问题数量</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ totalMap.notNum }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="totalMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ totalMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span=6>
        <Card class="statistics-card" id="statistics-card-2">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>集团督办</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ superviseMap.focusOnNum }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>二级集团督办</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ superviseMap.followNum }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="superviseMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ superviseMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="6">
        <Card class="statistics-card" id="statistics-card-3">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>超期未完成</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ notCompletedMap.notCompleted }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
            <Col span="15" class="statistics-text-title">

            </Col>
            <Col span="8" class="statistics-text-content">

            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="notCompletedMap.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ notCompletedMap.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col span="6">
        <Card class="statistics-card" id="statistics-card-4">
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <span>超三个月未闭环</span>
            </Col>
            <Col span="8" class="statistics-text-content">
              <span>{{ notCompleted3Map.notCompleted3M }}</span>
            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
            <Col span="15" class="statistics-text-title">

            </Col>
            <Col span="8" class="statistics-text-content">

            </Col>
          </Row>
          <Row type="flex" justify="space-between" class="code-row-bg">
            <Col span="15" class="statistics-text-title">
              <Progress :percent="notCompleted3Map.percent" :stroke-width="5" :hide-info="true"></Progress>
            </Col>
            <Col span="8" class="statistics-text-content" style="font-size: 14px">
              <span>{{ notCompleted3Map.percent }}%</span>
            </Col>
          </Row>
        </Card>
      </Col>
    </Row>
    <Row :gutter="7" style="margin-top: 7px">
      <Col span="16">
        <Card dis-hover>
          <p class="p-title">▎ </p>
          <p>问题分类</p>
          <problemCategory ref="problemCategory" :account-type="accountType" :data-to-query="dataToQuery"/>
        </Card>
      </Col>

      <Col span="8">

        <Card dis-hover>
          <p class="p-title">▎ </p>
          <p>发现级别</p>
          <ProblemCheckLevel ref="ProblemCheckLevel" :account-type="accountType" :data-to-query="dataToQuery"/>
        </Card>

      </Col>
    </Row>
    <Row :gutter="7" style="margin-top: 7px">

      <Col span="12">
        <Card dis-hover>
          <div class="flex-between">
            <div>
              <p class="p-title">▎ </p>
              <p>当前企业自查top10</p>
            </div>
            <download-button class="button-sure" :api="exportProblemCompanyUrl" :post="true" :queryForm="dataToQuery"
                             :exportFormBefore="exportProblemCompanyBefore"/>


          </div>
          <problem-company ref="problemCompany" :account-type="accountType" :data-to-query="dataToQuery"/>
        </Card>
      </Col>
      <Col span="12">
        <Card dis-hover>
          <p class="p-title">▎ </p>
          <p>问题来源</p>
          <problemSourceCount ref="problemSourceCount" :account-type="accountType" :data-to-query="dataToQuery"/>
        </Card>
      </Col>
    </Row>

    <Row :gutter="7" style="margin-top: 7px">

      <Col span="12">
        <Card dis-hover>
          <p class="p-title">▎ </p>
          <p>近五年问题统计</p>
          <FiveYearSourceCount ref="fiveYearSourceCount" :account-type="accountType" :data-to-query="dataToQuery"/>
        </Card>
      </Col>
      <Col span="12">
        <Card dis-hover>
          <div class="flex-between">
            <div>
              <p class="p-title">▎ </p>
              <p>整改完成率top10</p>
            </div>
            <download-button class="button-sure" :api="exportProblemCompletionRate" :post="true"
                             :queryForm="dataToQuery" :exportFormBefore="exportProblemCompanyBefore"/>
          </div>
          <problem-completion-rate ref="problemCompletionRate" :account-type="accountType"
                                   :data-to-query="dataToQuery"/>

        </Card>
      </Col>
    </Row>

    <Row :gutter="7" style="margin-top: 7px">

      <Col span="24">
        <Card dis-hover>
          <p class="p-title">▎ </p>
          <p>整改完成率</p>
          <ProblemCompletionSecond ref="ProblemCompletionSecond" :account-type="accountType"
                                   :data-to-query="dataToQuery"/>
        </Card>
      </Col>

    </Row>

  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import problemSourceCount from './ProblemSourceCount.vue'
import FiveYearSourceCount from './FiveYearSourceCount.vue'
import ProblemCheckLevel from "@/views/environment/account/ProblemCheckLevel";
import problemCategory from "@/views/environment/account/problemCategory.vue";
import ProblemCompletionRate from "@/views/environment/account/problemCompletionRate";
import ProblemCompany from "@/views/environment/account/problemCompany";
import ProblemCompletionSecond from "@/views/environment/account/ProblemCompletionSecond";

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {
    ProblemCompany,
    ProblemCompletionRate,
    ProblemCheckLevel, problemCategory,
    cascaderDom, problemSourceCount, FiveYearSourceCount, ProblemCompletionSecond
  },
  data() {
    return {
      ...this.createCommonDataField(),
      dateCh: [],
      ruleCustom: {},
      sceneList: [],
      basicList: [],
      accountType: '1',
      totalMap: {},
      superviseMap: {},
      notCompleted3Map: {},
      notCompletedMap: {},
      tableHeight: 10,
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),
      exportProblemCompanyUrl: Api.exportProblemCompany,
      exportProblemCompletionRate: Api.exportProblemCompletionRate,
      twoLevel: [],
      environmentProtectionList: []
    }
  },
  mounted() {
    this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
      this.twoLevel = res.data.data
    })
    this.dataToQuery.order = 'desc';
    this.dataToQuery.checkTime = [];
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    exportProblemCompanyBefore(data) {
      data.accountType = this.accountType;
      data.checkTime = this.dataToQuery.checkTime

    },
    query() {
      console.log(this.dataToQuery);
      this.getProblemCount();
      let _this = this;
      this.$nextTick(() => {
        this.$refs.problemSourceCount.query();
        this.$refs.ProblemCheckLevel.query();
        this.$refs.problemCategory.query();
        this.$refs.fiveYearSourceCount.query();
        this.$refs.problemCompany.query();
        this.$refs.problemCompletionRate.query();
        this.$refs.ProblemCompletionSecond.query();

      });
    },
    reset() {
      this.dataToQuery = {};

      this.query()
    },
    selectOrder(data) {

      this.dataToQuery.order = data.value;
      this.$refs.problemCompletionRate.query();
    },
    changeCheckTime(data) {
      this.dataToQuery.checkTime = data;
    },
    getProblemCount() {
      this.$http.post(Api.getProblemCount + this.accountType, this.dataToQuery).then((res) => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }

        if (res.data.status === 200) {
          this.totalMap = res.data.data.totalMap;
          this.superviseMap = res.data.data.superviseMap;
          this.notCompleted3Map = res.data.data.notCompleted3Map;
          this.notCompletedMap = res.data.data.notCompletedMap;
        }

      }).catch(e => {
        this.$Message.error("数据获取失败")

      })
    },

  },
  watch: {},
}
</script>

<style lang='css' scoped>

.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.statistics-card {
  width: 100%;
  height: 112px;

}

#statistics-card-1 {
  background-image: url(img/red_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-2 {
  background-image: url(img/yellow_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-3 {
  background-image: url(img/blue_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

#statistics-card-4 {
  background-image: url(img/green_mini.png);
  background-repeat: no-repeat;
  background-position: -16px, -10%;
  background-size: 112%, 112%;
}

.statistics-text-title {
  font-size: 18px;
  font-family: HiraginoSansGB-W6;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 27px;
  text-align: left;
  letter-spacing: 1px;
}

.statistcs-text-a {
  color: #FFFFFF;
}

.statistcs-text-a:hover {
  color: #f3f2f2;
}

.statistics-text-content {
  font-size: 18px;
  font-family: HiraginoSansGB;
  font-weight: normal;
  color: #FFFFFF;
  text-align: right;
  line-height: 27px;
  letter-spacing: 1px;
}

>>> .ivu-progress-bg {
  background-color: #FFFFFF;
}

>>> .ivu-progress-inner {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

p {
  display: inline-block;
  font-size: 18px;
}

.p-title {
  display: inline-block;
  line-height: 27px;
  font-size: 18px;
  height: 27px;
  color: red;
}

.ivu-btn-add {
  margin-top: 0;
}

.flex-between {
  display: flex;
  justify-content: space-between
}

.button-sure {
  height: 27px;
}
</style>
